/*
  学习目标：useEffect监听多个状态的变化
*/

import { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('~');

  // 分开监听
  // useEffect(() => {
  //   document.title = count + msg;
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, [count]);

  // useEffect(() => {
  //   document.title = count + msg;
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, [msg]);

  // 同时监听
  useEffect(() => {
    document.title = count + msg;
  }, [msg, count]);
  return (
    <div>
      <h1>{count}</h1>
      <h1>{msg}</h1>
      <button onClick={() => setCount(count + 1)}>点我</button>
      <button onClick={() => setMsg(msg + '~')}>点我 ~</button>
    </div>
  );
}
